
/**
 * 一些默认属性
 */
export const defaultAttrs = {
  createAndUpdatePopupWidth: '650px'
}
export const setDefaultAttrs = (opts) => {
  Object.assign(defaultAttrs, opts)
}

/**
 * 控件的大小
 */
export let controlSize = 'small'
export const setControlSize = (size) => (controlSize = size)

/**
 * 默认的el-table属性
 */
export const tableProps = {
  height: '100%',
  border: true
}
export const setTableProps = (opts) => {
  Object.assign(tableProps, opts)
}

/**
 * 默认页条数
 */
export let pageSize = 20
export const setPageSize = (size) => (pageSize = size)

/**
 * 默认的el-table-column的属性
 */
export const tableColumnProps = {
  align: 'center'
}
export const setTableColumnProps = (opts) => {
  Object.assign(tableColumnProps, opts)
}

/**
 * 默认的查询参数的key
 */
export const queryKeyMap = {
  // 请求的当前页数
  page: 'page',
  // 请求的页条数
  pageSize: 'pageSize'
}
export const setQueryKeyMap = (opts) => {
  Object.assign(queryKeyMap, opts)
}


/**
 * 默认的字段映射表
 */
export const fieldsMap = {
  // 请求返回的列表
  list: 'data',
  // 请求返回的总条数
  totalCount: 'count',
  // 请求返回的总页数
  totalPages: 'pages',
  // 请求返回的页条数
  pageSize: 'pageSize'
}
export const setFieldsMap = (opts) => {
  Object.assign(fieldsMap, opts)
}

/**
 * 内置的组件
 */
export const components = {
  input(h, attrs, listeners, ctx) {
    const vnodeData = getCommonVnodeData(ctx, { placeholder: attrs.label, clearable: true })
    vnodeData.attrs = { placeholder: vnodeData.props.placeholder }
    const vnode = h('ElInput', vnodeData)
    return vnode
  },
  textarea(h, attrs, listeners, ctx) {
    attrs.options = { ...attrs.options, type: 'textarea' }
    return components.input(h, attrs, listeners, ctx)
  },
  select(h, attrs, listeners, ctx) {
    const vnodeData = getCommonVnodeData(ctx, { placeholder: attrs.label, clearable: true })
    vnodeData.attrs = { placeholder: vnodeData.props.placeholder }
    return h('ElSelect', vnodeData, attrs.dicts.map(dict => h(
      'ElOption',
      {
        props: {
          label: dict.label,
          value: dict.value
        }
      },
      [
        h('span', dict.color ? { style: `color:${dict.color}` } : {}, dict.label)
      ]
    )))
  },
  radio(h, attrs, listeners, ctx) {
    const vnodeData = getCommonVnodeData(ctx)
    return h('ElRadioGroup', vnodeData, attrs.dicts.map(dict => h(
      'ElRadio',
      {
        props: {
          label: dict.value
        }
      },
      [
        h('span', dict.color ? { style: `color:${dict.color}` } : {}, dict.label)
      ]
    )))
  },
  date(h, attrs, listeners, ctx) {
    const vnodeData = getCommonVnodeData(ctx, { type: 'datetime', valueFormat: 'yyyy-MM-dd HH:mm:ss' })
    const props = vnodeData.props
    if (props.type === 'datetimerange') {
      props.startPlaceholder = props.startPlaceholder || `${attrs.label}(始)`
      props.endPlaceholder = props.endPlaceholder || `${attrs.label}(终)`
    } else {
      props.placeholder = props.placeholder || attrs.label
      vnodeData.style = 'width:190px'
    }
    return h('ElDatePicker', vnodeData)
  }
}
export const setComponents = (opts) => {
  Object.assign(components, opts)
}

function getCommonVnodeData(ctx, props = {}) {
  const attrs = ctx.data.attrs
  const listeners = ctx.data.on
  props = {
    ...props,
    ...attrs.options
  }
  return {
    props: {
      value: attrs.value,
      ...props
    },
    refInFor: ctx.data.refInFor,
    ref: ctx.data.ref,
    class: ctx.data.staticClass,
    staticStyle: ctx.data.staticStyle,
    style: ctx.data.style,
    on: {
      input: listeners.input
    }
  }
}
